<template>
	<view class="container position-relative">
		<view style="margin-bottom: 130rpx;">
			<view class="section-1">
				<template v-if="orderType == 'takein'">
					<list-cell class="location">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="store-name flex-fill">
								{{ store.name }}
							</view>
							<image src="/static/images/navigator-1.png" class="arrow"></image>
						</view>
					</list-cell>
				</template>
				<template v-else>
					<list-cell @click="chooseAddress">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center justify-content-between mb-10">
								<view class="font-size-extra-lg text-color-base">{{ address.street }}</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view>
							<view class="d-flex text-color-assist font-size-sm align-items-center">
								<view class="mr-10">{{ address.acceptName }}</view>
								<view class="mr-10">{{ !address.sex ? '先生' : '女士' }}</view>
								<view>{{ address.mobile }}</view>
							</view>
						</view>
					</list-cell>
				</template>
				<template v-if="orderType == 'takein'">
					<list-cell arrow class="meal-time">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title">取餐时间</view>
							<view class="time">立即用餐</view>
						</view>
					</list-cell>
					<list-cell class="contact" last :hover="false">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title flex-fill">联系电话</view>
							<view class="time">
								<input class="text-right" placeholder="请输入手机号码" value="18666600000"/>
							</view>
							<view class="contact-tip font-size-sm">自动填写</view>
						</view>
					</list-cell>
				</template>
				<template v-else>
					<list-cell>
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center font-size-base text-color-base">
								<view class="flex-fill">预计送达时间</view>
								<view class="mr-10">15:18</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view>
							<view class="font-size-base text-color-primary">
								特殊时期减少接触，请修改下方订单备注
							</view>
						</view>
					</list-cell>
				</template>
			</view>
			<!-- 购物车列表 begin -->
			<view class="section-2">
				<view class="cart d-flex flex-column">
					<list-cell last v-for="(item, index) in cart" :key="index">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center mb-10">
								<view class="name-and-props overflow-hidden">
									<view class="text-color-base font-size-lg">
										{{ item.name }}
									</view>
								</view>
								<view class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
									<view>x{{ item.number }}</view>
									<view>￥{{ item.price }}</view>
								</view>
							</view>
							<view class="text-truncate font-size-base text-color-assist">
								{{ item.props_text }}
							</view>
						</view>
					</list-cell>
					<template v-if="orderType == 'takeout'">
						<list-cell last v-if="store.packingFee > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>包装费</view>
								<view>￥{{ parseFloat(store.packingFee) }}</view>
							</view>
						</list-cell>
						<list-cell last v-if="store.delivery_cost > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>配送费</view>
								<view>￥{{ parseFloat(store.delivery_cost) }}</view>
							</view>
						</list-cell>
					</template>
				</view>
			
				<list-cell last>
					<view class="flex-fill d-flex justify-content-end align-items-center">
						<view>总计￥{{ total }},实付</view>
						<view class="font-size-extra-lg font-weight-bold">￥{{ amount }}</view>
					</view>
				</list-cell>
			</view>
			<!-- 购物车列表 end -->
			<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning" 
				style="padding: 20rpx 0;">
				<view class="iconfont iconhelp line-height-100"></view>
				<view>活动期间商品价格自动修改，请直接下单</view>
			</view>
			<!-- 支付方式 begin -->
			<view class="payment">
				<list-cell last :hover="false">
					<text>支付方式</text>
				</list-cell>
				<list-cell>
					<view class="d-flex align-items-center justify-content-between w-100 disabled">
						<view class="iconfont iconwxpay line-height-100 payment-icon" ></view>
						<view class="flex-fill">微信支付</view>
						<view class="font-size-sm"></view>
						<view class="iconfont iconradio-button-off line-height-100 checkbox"></view>
					</view>
				</list-cell>
				<list-cell last>
					<view class="d-flex align-items-center justify-content-between w-100">
						<view class="iconfont iconbalance line-height-100 payment-icon" style="color: #7EB73A;"></view>
						<view class="flex-fill">支付宝支付</view>
						<view class="iconfont iconradio-button-on line-height-100 checkbox checked"></view>
					</view>
				</list-cell>
			</view>
			<!-- 支付方式 end -->
			<!-- 备注 begin -->
			<list-cell arrow last @click="goToRemark">
				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">备注</view>
					<view class="text-color-primary flex-fill text-truncate text-right">{{ form.remark || '点击填写备注' }}</view>
				</view>
			</list-cell>
			<!-- 备注 end -->
		</view>
		<!-- 付款栏 begin -->
		<view class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
			<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view>
			<view class="font-size-lg flex-fill">￥{{ amount }}</view>
			<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
				style="padding: 0 60rpx;" @tap="submit">
				付款
			</view>
		</view>
		<!-- 付款栏 end -->
		<modal :show="ensureAddressModalVisible" custom :mask-closable="false" :radius="0" width="90%">
			<view class="modal-content">
				<view class="d-flex justify-content-end">
					<image src="/static/images/pay/close.png" style="width: 40rpx; height: 40rpx;" @tap="ensureAddressModalVisible=false"></image>
				</view>
				<view class="d-flex just-content-center align-items-center" style="margin-bottom: 40px;">
					<view class="font-size-extra-lg text-color-base">请再次确认下单地址</view>
				</view>
				<view class="d-flex font-size-base text-color-base font-weight-bold align-items-center justify-content-between mb-20">
					<view>{{ address.acceptName }} {{ address.sex ? '女士' : '先生' }}</view>
					<view>{{ address.mobile }}</view>
				</view>
				<view class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40">
					<view>{{ address.street + address.doorNumber }}</view>
					<button type="primary" size="mini" plain class="change-address-btn">修改地址</button>
				</view>
				<button type="primary" class="pay_btn" @tap="pay">确认并付款</button>
			</view>
		</modal>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex'
	import listCell from '@/components/list-cell/list-cell'
	import modal from '@/components/modal/modal'
	import orders from '@/api/orders'
	import getDateTime from '@/common/getdateTime.js'
	import $http from '@/common/api/request.js'
	
	export default {
		components: {
			listCell,
			modal
		},
		data() {
			return {
				nowTime: '',
				cart: [],
				myOrder: {
				  amount: '',
				  createdAt: '',
				  goods: [],
				  goodsNum: 0,
				  mobile: '',
				  openid: '',
				  orderNo: '',
				  ordertype: '',
				  payMode: '支付宝支付',
				  postscript: '',
				  remark: '',
				  sendedTime: 0,
				  sortNum: '',
				  status: 0,
				  statusText: '',
				  storeId: 1,
				  addressId:0,
				  userName:'' 
				},
				form: {
					remark: ''
				},
				ensureAddressModalVisible: false
			}
		},
		computed: {
			...mapState(['orderType', 'address', 'store','myOpenId','member']),
			total() {
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			},
			amount() {
				return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			}
		},
		onLoad(option) {
			const {remark} = option
			this.cart = uni.getStorageSync('cart')
			console.log("所购买的购物车内的东西如下",this.cart)
			remark && this.$set(this.form, 'remark', remark)
		},
		methods: {
			...mapMutations(['SET_ORDER']),
			goToRemark() {
				uni.navigateTo({
					url: '/pages/remark/remark?remark=' + this.form.remark
				})
			},
			chooseAddress() {
				uni.navigateTo({
					url: '/pages/address/address?is_choose=true&scene=pay'
				})
			},
			goToPackages() {
				uni.navigateTo({
					url: '/pages/packages/index'
				})
			},
			submit() {
				if(this.orderType == 'takeout') {
					this.ensureAddressModalVisible = true
				} else {
					this.pay()
				}
			},
			pay() {
				uni.showLoading({title: '加载中'})
				//测试订单，如果是店内就用第一条测试数据，外卖就用第二条,并确保其为下单成功的状态1
				// let order = this.orderType == 'takein' ? orders[0] : orders[1]
				// order = Object.assign(order, {status: 1})
				//传给后端储存的订单数据如下，如果是使用接口，得创建合适的order对象，传给后端的时候，传给vuex，用于取单
				//创建合适的对象
				let amount1 = this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
				this.myOrder.amount = amount1.toString()
				console.log("订单总价格",this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0))
				console.log("订单总价格(类型)",typeof(this.myOrder.amount))
				var timeStr = getDateTime.dateTimeStr('y-m-d h:i:s'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
				this.nowTime = timeStr
				console.log("获取当前时间：");
				console.log(this.nowTime);
				this.myOrder.createdAt = this.nowTime
				// // 遍历 cart 列表，为每个对象添加 created_time 属性
				this.cart.forEach(item => {
				  item.created_time = this.nowTime;
				});
				console.log("获取添加时间后的购物车：",this.cart);
				// goods: [],
				this.myOrder.goods = this.cart
				
				// goodsNum: 0,统计列表中的对象数量并保存到 goodsNum 变量中
				this.myOrder.goodsNum = this.cart.length;
				// mobile: '',
				this.myOrder.mobile = this.member.mobilephone
				console.log("用户信息：",this.member)
				// openid: '',
				console.log("目前收集到的表格数据：",this.member.openid);
				this.myOrder.openid = this.member.openid
				// userName:'' 
				this.myOrder.userName = this.member.nickname
				// ordertype: '',
				this.myOrder.ordertype = this.orderType
				// postscript: '',
				this.myOrder.postscript = this.form.remark 
				//下单地址，如果是外卖的话，把全局变量里的地址id取出来 
				if(this.orderType == 'takeout') {
					this.myOrder.addressId = this.address.id;
					console.log("目前选择的地址信息：",this.member);
				} 
				
				//需要先搞支付宝沙箱，若支付成功，生成订单号，取单号，状态，状态信息，支付失败也是一样的，全部搞完之后，把form传给后端就行
				// orderNo: ''订单号
				var randNum = Math.floor(Math.random() * (99999 - 10000 + 1)) + 10000
				this.myOrder.orderNo = "Order"+randNum.toString()
				// sortNum: '',取单号
				var randNum2 = Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000
				this.myOrder.sortNum = randNum2.toString()
				// status: 0,
				// statusText: '',
				//支付宝沙箱
				
				// $http.request({
				// 	url:"/payment/pay",
				// 	method:"POST",
					
				// }).then((res)=>{
				// 	console.log("支付宝沙箱返回数据",res)
				// })
				
				// $http.request({
				// 	url:"/pay/alipay",
				// 	method:"POST",
				// 	data:{
				// 		dona_id: this.myOrder.orderNo,
				// 		dona_money: this.myOrder.amount
				// 	}
				// }).then((res)=>{
				// 	console.log("支付宝沙箱返回数据",res)
				// })
				// 
				
				
				console.log("目前收集到的表格数据：",this.myOrder);
				
				// // this.myOrder = JSON.stringify(this.myOrder)
				
				console.log("参数太长会导致报400错误：",this.myOrder);
				console.log("目前收集到的表格类型：",typeof(this.myOrder));
				
				// 把对象传给后端
				$http.request({
							url:"/orders/",
							method:"POST",
							data: this.myOrder
						}).then((res)=>{
							if(res.code == 200){
								console.log("被插入的数据如下:orders");
								console.log(res.data);
								uni.showToast({
									title:'orders添加成功',
									icon:'none'
								})
								
							}else{
								uni.showToast({
									title:'orders添加失败，请重试',
									icon:'none'
								})
								}
						}).catch(()=>{
							uni.showToast({
								title:'/addresses/add接口获取失败，请重试',
								icon:'none'
							})	
				})
				
				
				
				
				//把刚刚的订单传给vuex，用于取餐
				console.log("所购买的传给vuex储存的订单数据如下",this.myOrder)
				this.SET_ORDER(this.myOrder)
				
				
				uni.removeStorageSync('cart')
				uni.reLaunch({
					url: '/pages/take-foods/take-foods'
				})
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}
	
	.arrow {
		width: 50rpx; 
		height: 50rpx;
		position: relative;
		margin-right: -10rpx;
	}
	
	.location {
		.store-name {
			font-size: $font-size-lg;
		}
		
		.iconfont {
			font-size: 50rpx;
			line-height: 100%;
			color: $color-primary;
		}
	}
	
	.section-1 {
		margin-bottom: 30rpx;
		.contact {
			.contact-tip {
				margin-left: 10rpx;
				border: 2rpx solid $color-primary;
				padding: 6rpx 10rpx;
				color: $color-primary;
			}
		}
	}
	
	.section-2 {
		.name-and-props {
			width: 65%;
		}
	}
	
	.payment {
		margin-bottom: 30rpx;
		
		.disabled {
			color: $text-color-grey;
		}
		
		.payment-icon {
			font-size: 44rpx; 
			margin-right: 10rpx;
		}
		
		.checkbox {
			font-size: 36rpx;
			margin-left: 10rpx;
		}
		
		.checked {
			color: $color-primary;
		}
	}
	
	.pay-box {
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
		height: 100rpx;
	}
	
	.modal-content {
		.change-address-btn {
			line-height: 2;
			padding: 0 1em;
		}
		.pay_btn {
			width: 100%;
			border-radius: 50rem !important;
			line-height: 3;
		}
	}
</style>
